<template>
  <Echarts
    id="echarts"
    height="300px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
// 引进Echarts 组件
import Echarts from "@/components/Echarts/Echarts.vue";
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
// import chartOption from "../../components/Echarts/options";
const loading = ref(false); // 初始值可以根据实际情况设定
const echartsOptions = reactive({
  options: {},
  init: false,
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  // echartsOptions.options = chartOption.testOption(testData, testDimensions);
  echartsOptions.options = {
    tooltip: {},
    animation: false,
    grid: {
      top: "20%",
      bottom: "33%", //也可设置left和right设置距离来控制图表的大小
      left: "5%",
      right: "5%",
    },
    xAxis: {
      boundaryGap: false,
      data: [1, 2, 3, 4, 5],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "rgba(10,71,62,0.2)",
        },
      },
      axisTick: {
        show: false, //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 14,
        textStyle: {
          color: "rgba(0,0,0,1)", //X轴文字颜色
        },
      },
    },
    yAxis: [
      {
        name: "%",
        nameLocation: "end",
        nameTextStyle: {
          color: "#333",
          align: "right",
          padding: [0, 15],
        },
        type: "value",
        gridIndex: 0,
        splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(233,242,241,1)",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(233,242,241,1)",
          },
        },
        axisLabel: {
          show: true,
          margin: 14,
          fontSize: 14,
          textStyle: {
            color: "#333", //X轴文字颜色
          },
        },
      },
    ],
    series: [
      {
        name: "Fake Data",
        type: "line",
        symbol: "none",
        smooth: true,
        sampling: "lttb",
        itemStyle: {
          color: "#20C3A7",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: "rgba(255,255,255,1)",
            },
            {
              offset: 0,
              color: "rgb(32,195,167)",
            },
          ]),
        },
        data: [12, 2, 3, 14, 5],
      },
    ],
  };
});
</script>